<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-,">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
        }

        .box {
            width: 800px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #ccc;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .box span {
            padding: 20px;
            color: white;
            font-size: 20px;
        }

        .box span.active {
            color: red;
        }

        .btns {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btns button {
            display: none;
            transition: all .4s;
            padding: 20px;
            margin: 0 20px;
            font-size: 30px;
            background: #444;
            color: white;
        }

        .btns button:hover {
            background: white;
            color: black;
        }
    </style>
</head>

<body>
    <select>
        <option value="2109">2109</option>
        <option value="2201">2201</option>
    </select>
    <div id="box" class="box">

    </div>

    <div id="btns" class="btns">
        <button id="c1">点一个</button>
        <button id="c5">点五个</button>
    </div>
    <script src="QF.js"></script>
    <script>
        // 先获取服务器的本班成员名称
        // 如何得到数据？  前四周我们是定义在HTML文件中的 现在学习了AJAX 我们应当知道 数据其实是后端返回给前端的
        // 前端要发送请求去获取 
        // 如何发送请求呢？ a标签？img？form？video？script？ 
        // 综合考虑之下我们决定采取ajax

        var select = document.querySelector("select");
        var box = document.getElementById("box")
        select.onchange = function () {
            sendAjax(select.value)
            c1.style.display = "none"
            c5.style.display = "none"
            box.innerHTML = '';
        }

        function sendAjax(id) {
            QF.get("/lession02/getStudentsName", { id }, function (data) {
                var { error, data, message } = data;
                // 正常的前端流程第一步应该是验证数据是否可用
                if (!error) {
                    // 说明数据正确 将data数组中的所有成员的名称 格式化成字符串 然后填充到页面中
                    box.innerHTML = data.map(val => `<span>${val}</span>`).join('');
                    c1.style.display = "block";
                    c5.style.display = "block"
                    return;
                }
            })
        }

        sendAjax(select.value)


        // 点一个
        var c1 = document.getElementById("c1");
        var c5 = document.getElementById("c5");
        c1.onclick = function () {
            // 点的时候获取所有名字元素
            var children = [...box.querySelectorAll("span")];
            console.log(children)
            // 点击的时候先取消之前的颜色
            children.forEach(val => val.className = '')

            // 选中一个元素 然后让它变色
            var idx = parseInt(Math.random() * children.length);
            children[idx].className = "active"
        }



        // 点5个
        c5.onclick = function () {
            // 点的时候获取所有名字元素
            var children = [...box.querySelectorAll("span")];
            // 点击的时候先取消之前的颜色
            children.forEach(val => val.className = '')
            var arr = [];

            while (true) {
                var idx = parseInt(Math.random() * children.length);
                if (arr.indexOf(idx) != -1) {
                    // 找到了说明随机的这个新数字是重复了的 就直接下一个
                    continue;
                }
                // 如果没有重复 就会放入数组
                arr.push(idx)
                if (arr.length === 5) {
                    break;
                }
            }

            // 循环下标数组 让每一个成员都变红
            arr.forEach(val => children[val].className = "active")
        }
    </script>
</body>

</html>